<template>
  <div class="ReturnField">
    <!-- 粘性 -->
    <van-sticky>
      <div class="ReturnField-box">
        <div class="ReturnField-left">
          <van-icon
            @click="ReturnUp"
            name="arrow-left"
            color="white"
            size="24"
          />
        </div>
        <div class="ReturnField-right">
          <!-- 白色按钮 -->
          <van-icon
            v-show="!localLikeShow"
            @click="localLike(ItemContent.content_id, ItemContent.title)"
            color="white"
            size="24"
            name="star-o"
          />
          <!-- 红色按钮 -->
          <van-icon
            v-show="localLikeShow"
            @click="RemovelocalLike(ItemContent.content_id, ItemContent.title)"
            name="star"
            color="red"
            size="24"
          />
          <van-icon
            color="white"
            size="24"
            name="share-o"
            @click="showShare = true"
          />
          <!-- 分享面板 -->
          <van-share-sheet
            v-model="showShare"
            title="立即分享给好友"
            :options="options"
          />
        </div>
      </div>
    </van-sticky>
  </div>
</template>

<script>
export default {
  name: "ReturnField",
  props: ["ItemContent"],
  data() {
    return {
      showShare: false,
      // 收藏按钮
      localLikeShow: false,
      options: [
        [
          { name: "微信", icon: "wechat" },
          { name: "朋友圈", icon: "wechat-moments" },
          { name: "微博", icon: "weibo" },
          { name: "QQ", icon: "qq" },
        ],
        [
          { name: "复制链接", icon: "link" },
          { name: "分享海报", icon: "poster" },
          { name: "二维码", icon: "qrcode" },
          { name: "小程序码", icon: "weapp-qrcode" },
        ],
      ],
    };
  },
  mounted() {},

  methods: {
    // 返回
    ReturnUp() {
      this.$router.go(-1);
    },

    // 收藏
    localLike(content_id, title) {
      // 按钮颜色show取反
      this.localLikeShow = !this.localLikeShow;

      console.log(content_id, title);
      // 判断用不用存储
      console.log("存储");
      localStorage.setItem(title, content_id);
    },

    // 红色按钮 删除本地存储
    RemovelocalLike(content_id, title) {
      console.log("删除");
      localStorage.removeItem(title);
      this.localLikeShow = false;
    },
  },
  watch: {
    // ItemContent props传参 来的所以在mounted里面直接获取不到
    ItemContent(newVal, oldval) {
      if (newVal != oldval) {
        // 进来页面循环存储的数据 有说明是收藏
        for (let i = 0; i < localStorage.length; i++) {
          // 获取键名
          let keyName = localStorage.key(i);
          console.log("keyName=>", keyName);

          if (keyName == this.ItemContent.title) {
            console.log("有");
            // 改为true
            this.localLikeShow = true;
          }
        }
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.ReturnField {
  .ReturnField-box {
    height: 2.8125rem;
    background-color: transparent;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 99;
    .ReturnField-right {
      .van-icon {
        padding: 0 0.375rem;
      }
    }
  }
}
</style>